
<div ng-form="ng-form" role="form" name="deployForm" ng-class="{'need-valid':needValid}" novalidate="novalidate" class="mod-deploy create-project2">
  <loading ng-if="loadingsIns.isLoading"></loading>
  <ul class="com-list-info">
    <li class="has-border"><span class="info-name">实例个数</span>
      <div class="info-content container-info">
        <div class="line-short">
          <input ng-model="config.replicas" name="replicas" ng-pattern="/^[1-9]\d*$/" is-over="is-over" max="999" min="1" class="ui-input-fill ui-input-sm container-txt"/><span class="container-unit">个</span>
        </div><span ng-if="(needValid||deployForm.replicas.$dirty)&amp;&amp;deployForm.replicas.$invalid" class="txt-error">请填写0~999范围内的数字</span>
      </div>
    </li>
    <li class="has-border"><span class="info-name">筛选主机</span>
      <div class="info-content">
        <div class="line-short">
          <div select-con="select-con" class="com-select-con line-element">
            <button class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{deployIns.clusterListIns.cluster.name||'选择集群'}}</button>
            <ul class="select-list">
              <li ng-if="deployIns.clusterListIns.clusterList.length===0"><a>无相关信息</a></li>
              <li ng-repeat="cluster in deployIns.clusterListIns.clusterList" class="select-item"><a ng-click="deployIns.toggleCluster($index)" ng-bind="cluster.name"></a></li>
            </ul>
            <input type="hidden" ng-model="deployIns.clusterListIns.cluster.name" name="clusterName" required="required"/><span ng-if="(needValid||validHost)&amp;&amp;deployForm.clusterName.$invalid" class="txt-error">请选择集群</span>
          </div>
          <div select-con="select-con" class="com-select-con line-element">
            <button ng-cloak="ng-cloak" class="ui-btn ui-btn-white ui-btn-select line-element"><i class="icon-down"></i>{{deployIns.envText}}</button>
            <ul class="select-list">
              <li ng-repeat="env in deployIns.envList" class="select-item"><a ng-bind="env.text" ng-click="deployIns.toggleEnv(env)"></a></li>
            </ul>
            <input type="hidden" ng-model="config.hostEnv" name="hostEnv" required="required"/><span ng-if="(needValid||validHost)&amp;&amp;deployForm.hostEnv.$invalid" class="txt-error">请选择部署环境</span>
          </div>
        </div>
        <div class="line-long top-margin">
          <div select-con="select-con" label="true" class="ui-input-white host-txt-con com-select-con">
            <ul class="selected-labels">
              <li ng-repeat="(label,value) in deployIns.nodeListIns.labelsInfo|search:'isSelected':true|search:'isShow':true" ng-cloak="ng-cloak" class="select-label">{{label}}<a ng-click="deployIns.nodeListIns.toggleLabel(label,false)" class="icon-cancel"></a></li>
              <li class="select-input">
                <input placeholder="选择主机标签" ng-model="labelKey.key" ng-keydown="labelKeyDown($event,labelKey.key,labelsInfoFiltered);" ng-focus="selectFocus()" class="line-element ui-btn-select"/>
              </li>
            </ul>
            <ul class="select-list">
              <li ng-if="objLength(labelsInfoFiltered)===0"><a>无相关信息</a></li>
              <li ng-repeat="(label,value) in labelsInfoFiltered=(deployIns.nodeListIns.labelsInfo| searchKey:labelKey.key|search:'isShow':true)" class="select-item"><a ng-bind="label" ng-click="deployIns.nodeListIns.toggleLabel(label,true);labelKey.key='';"></a></li>
            </ul>
          </div><span class="txt-wrap"><a ng-click="deployIns.nodeListIns.showHost()" class="link-safe">查看选中主机</a></span>
        </div>
      </div>
    </li>
    <li><span class="info-name">namespace</span>
      <div class="info-content">
        <div ng-if="!deployIns.isNewNamespace" class="line-short">
          <div select-con="select-con" class="line-element com-select-con">
            <button class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{config.namespace||'选择已有namespace'}}</button>
            <ul class="select-list">
              <li ng-if="deployIns.namespaceList.length===0"><a>无相关信息</a></li>
              <li ng-repeat="namespace in deployIns.namespaceList" class="select-item"><a ng-bind="namespace.name" ng-click="deployIns.toggleNamespace(namespace.name)"></a></li>
            </ul>
          </div><span class="txt-wrap"><a ng-click="deployIns.toggleIsNewNamespace()" class="link-safe">新建namespace</a></span>
          <input type="hidden" name="selectNamespace" ng-model="config.namespace" required="required"/>
        </div>
        <div ng-if="deployIns.isNewNamespace" class="line-short">
          <input placeholder="新建namespace" ng-model="config.namespace" name="namespace" ng-model-options="{updateOn:'default blur',debounce:{default:500,blur:0}}" required="required" ng-pattern="/^[a-zA-Z][a-zA-Z0-9_-]*$/" is-namespace-exist="is-namespace-exist" clusterid="{{deployIns.clusterListIns.cluster.id}}" class="ui-input-white line-element"/><span class="txt-wrap"><a ng-click="deployIns.toggleIsNewNamespace()" class="link-safe">选择已有namespace</a></span>
        </div><span ng-if="needValid&amp;&amp;deployForm.selectNamespace.$invalid" class="txt-error">请选择namespace</span><span ng-if="(needValid||deployForm.namespace.$dirty)&amp;&amp;deployForm.namespace.$error.required" class="txt-error">请填写namespace</span><span ng-if="(needValid||deployForm.namespace.$dirty)&amp;&amp;!deployForm.namespace.$error.required&amp;&amp;deployForm.namespace.$error.pattern" class="txt-error">非法的namespace</span><span ng-if="(needValid||deployForm.namespace.$dirty)&amp;&amp;!deployForm.namespace.$error.required&amp;&amp;deployForm.namespace.$error.isNamespaceExist" class="txt-error">namespace已存在</span>
      </div>
    </li>
    <li><span class="info-name">部署名称</span>
      <div class="info-content">
        <div class="line-long">
          <input ng-model="config.deployName" name="deployName" required="required" is-deploy-exist="is-deploy-exist" namespace="{{config.namespace}}" ng-maxlength="20" clustername="{{deployIns.clusterListIns.cluster.name}}" ng-pattern="/^[0-9a-z](-*[0-9a-z]+)*$/" ng-model-options="{updateOn:'default blur',debounce:{default:500,blur:0}}" class="ui-input-fill line-element"/>
        </div>
        <div ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;deployForm.deployName.$error.required" class="txt-error">必填</div>
        <div ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;!deployForm.deployName.$error.required&amp;&amp;deployForm.deployName.$error.isDeployExist" class="txt-error">部署名已存在</div>
        <div ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;!deployForm.deployName.$error.required&amp;&amp;deployForm.deployName.$error.pattern" class="txt-error">非法的名称</div><span ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;!deployForm.deployName.$error.required&amp;&amp;deployForm.deployName.$error.maxlength" class="txt-error">长度超出限制</span>
      </div>
    </li>
    <li class="has-border"><span class="info-name">创建者</span>
      <div class="info-content">
        <div class="line-short">
          <div select-con="select-con" class="line-element com-select-con">
            <button class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{deployIns.userGroupListIns.userGroup.name}}</button>
            <ul class="select-list">
              <li ng-repeat="group in deployIns.userGroupListIns.userGroupList" class="select-item"><a ng-bind="group.name" ng-click="deployIns.userGroupListIns.toggle($index)"></a></li>
            </ul>
          </div>
          <input type="hidden" name="creatorName" ng-model="deployIns.userGroupListIns.userGroup.name" required="required"/>
        </div><span ng-show="needValid&amp;&amp;deployForm.creatorName.$invalid" class="txt-error">请选择创建者</span>
      </div>
    </li>
    <li><span class="info-name">日志</span>
      <div class="info-content">
        <button ng-click="deployIns.addLogDraft()" class="ui-btn ui-btn-sm ui-btn-active add-log">添加</button>
        <div ng-form="ng-form" ng-repeat="log in config.logDraft.logItemDrafts" name="childForm" class="log-item"><a ng-click="deployIns.deleteLogDraft($index)" class="icon-cancel cancel-log"></a>
          <input placeholder="请输入日志路径，不能放在根目录下" ng-pattern="/^/.*[^/]$/" ng-model="log.logPath" name="logPath" is-required="is-required" param1="{{log.autoCollect&amp;&amp;log.logTopic}}" param2="{{log.autoCollect&amp;&amp;log.processCmd}}" param3="{{log.autoDelete&amp;&amp;log.logExpired}}" class="ui-input-fill element-full"/><span ng-if="(needValid||childForm.logPath.$dirty)&amp;&amp;childForm.logPath.$error.pattern" class="txt-error">非法的格式</span>
          <div class="log-check">
            <input id="autoCollect{{$index}}" type="checkbox" name="autoCollect" ng-model="log.autoCollect" class="ui-check"/>
            <label for="autoCollect{{$index}}">自动收集日志</label>
          </div>
          <div ng-if="log.autoCollect" class="line-full"><span class="log-title"> 日志topic</span>
            <input placeholder="请输入日志topic" name="logTopic" ng-model="log.logTopic" required="required" class="ui-input-fill line-element"/>
          </div>
          <div ng-if="log.autoCollect" class="line-full"><span class="log-title"> 预处理命令</span>
            <div class="line-element">
              <input placeholder="请输入预处理命令" name="processCmd" ng-model="log.processCmd" required="required" class="ui-input-fill full"/><span class="txt-wrap"><a popover="对收集到的日志做进一步处理，比如筛选或增减字段等，可以用grep和awk命令完成，命令以管道形式执行，因此必须以“|”开始，比如一个典型的处理命令为：   | grep &quot;ERROR\\|WARN\\| EXCEPTION\\| statistic&quot; | awk -vnhost=&quot;$HOSTNAME&quot; '{print &quot;[&quot;nhost&quot;]--&quot;$0}'，该命令将只筛选包含四个对应关键字的行，并且会在行首添加&quot;[hostname]--&quot;的字符串，参照可完成其他复杂的处理方式" class="icon-help"></a></span>
            </div>
          </div>
          <div class="log-check">
            <input id="autoDelete{{$index}}" type="checkbox" name="autoDelete" ng-model="log.autoDelete" class="ui-check"/>
            <label for="autoDelete{{$index}}">自动删除日志</label>
          </div>
          <div ng-if="log.autoDelete" class="line-full"><span class="log-title"> 过期时间</span>
            <input placeholder="过期则自动删除" name="logExpired" ng-model="log.logExpired" required="required" ng-pattern="/^[1-9]\d*$/" class="ui-input-fill"/><span class="unit">小时</span>
          </div>
          <div ng-if="(needValid||deployForm.logExpired.$dirty)&amp;&amp;deployForm.logExpired.$invalid" class="txt-error log-error">请输入大于0的整数</div>
        </div>
      </div>
    </li>
    <li class="has-border"><span class="info-name">健康检查</span>
      <div class="info-content"><span class="com-check-con">
          <input id="checkNONE" type="radio" value="NONE" name="healthCheckerType" ng-model="config.healthCheckerDraft.type" class="ui-radio"/>
          <label for="checkNONE">None</label></span><span class="com-check-con">
          <input id="checkTCP" type="radio" value="TCP" name="healthCheckerType" ng-model="config.healthCheckerDraft.type" ng-disabled="config.networkMode=='HOST'" class="ui-radio"/>
          <label for="checkTCP">TCP检查</label></span><span class="com-check-con">
          <input id="checkHTTP" type="radio" value="HTTP" name="healthCheckerType" ng-model="config.healthCheckerDraft.type" ng-disabled="config.networkMode=='HOST'" class="ui-radio"/>
          <label for="checkHTTP">HTTP检查</label></span>
        <div ng-if="config.networkMode=='HOST'" class="line-short"><span class="txt-prompt tool-align-input">Host模式下不能使用健康检查</span></div>
        <div ng-if="config.healthCheckerDraft.type=='TCP'||config.healthCheckerDraft.type=='HTTP'" class="line-long"><span class="child-name">检查端口</span>
          <input placeholder="请输入端口号" name="port" ng-model="config.healthCheckerDraft.port" required="required" class="ui-input-fill line-element"/>
        </div><span ng-if="(needValid||deployForm.port.$dirty)&amp;&amp;deployForm.port.$invalid" class="child-error txt-error">必填</span>
        <div ng-if="config.healthCheckerDraft.type=='TCP'||config.healthCheckerDraft.type=='HTTP'" class="line-long"><span class="child-name">超时时间（s）</span>
          <input placeholder="" name="timeout" ng-model="config.healthCheckerDraft.timeout" required="required" ng-pattern="/^[1-9]\d*$/" class="ui-input-fill line-element"/>
        </div><span ng-if="(needValid||deployForm.timeout.$dirty)&amp;&amp;deployForm.timeout.$invalid" class="child-error txt-error">请填写数字</span>
        <div ng-if="config.healthCheckerDraft.type=='HTTP'" class="line-long"><span class="child-name">检测URL</span>
          <input placeholder="请输入URL" name="url" ng-model="config.healthCheckerDraft.url" required="required" class="ui-input-fill line-element"/>
        </div><span ng-if="(needValid||deployForm.url.$dirty)&amp;&amp;deployForm.url.$invalid" class="child-error txt-error">必填</span>
        <div ng-if="config.healthCheckerDraft.type=='HTTP'" class="line-long"><span class="child-name">允许返回值</span><span class="child-txt"> 200-400(不包含400)</span></div>
      </div>
    </li>
    <li class="has-border"><span class="info-name">网络模式</span>
      <div class="info-content"><span ng-click="visitMode.currentData='noAccess'" class="com-check-con">
          <input id="checkOverlay" type="radio" value="DEFAULT" name="netWork" ng-model="config.networkMode" class="ui-radio"/>
          <label for="checkOverlay">Overlay</label></span><span ng-click="visitMode.currentData='noAccess';config.healthCheckerDraft.type='NONE'" class="com-check-con">
          <input id="checkHost" type="radio" value="HOST" name="netWork" ng-model="config.networkMode" class="ui-radio"/>
          <label for="checkHost">Host</label></span></div>
    </li>
    <li class="has-border"><span class="info-name">访问设置</span>
      <div class="info-content"><span class="com-check-con">
          <input id="noAccess" type="radio" value="noAccess" name="visitMode" ng-model="visitMode.currentData" class="ui-radio"/>
          <label for="noAccess">禁止访问</label></span><span ng-if="config.networkMode=='HOST'" class="com-check-con">
          <input id="access" type="radio" value="access" name="visitMode" ng-model="visitMode.currentData" class="ui-radio"/>
          <label for="access">允许访问</label></span><span ng-if="config.networkMode=='DEFAULT'" class="com-check-con">
          <input id="internal" type="radio" value="internal" name="visitMode" ng-model="visitMode.currentData" class="ui-radio"/>
          <label for="internal">对内服务</label></span><span ng-if="config.networkMode=='DEFAULT'" class="com-check-con">
          <input id="foreign" type="radio" value="foreign" name="visitMode" ng-model="visitMode.currentData" class="ui-radio"/>
          <label for="foreign">对外服务</label></span></div>
    </li>
    <li ng-if="visitMode.currentData!='noAccess'" class="has-border"><span class="info-name"> </span>
      <div class="info-content">
        <div ng-form="ng-form" name="childForm" ng-if="config.networkMode=='DEFAULT'" class="log-item">
          <div ng-if="visitMode.currentData=='foreign'" ng-repeat="loadbalance in config.loadBalanceDrafts">
            <div class="line-full"><span class="log-title"> 程序服务端口</span>
              <input placeholder="请输入容器内部端口" name="targetPort" ng-model="loadbalance.targetPort" is-required="is-required" param1="loadbalance.port" class="ui-input-fill line-element"/>
            </div>
            <div ng-if="visitMode.currentData=='foreign'" class="line-full"><span class="log-title"> 对外访问端口</span>
              <input placeholder="请输入端口号" name="port" ng-model="loadbalance.port" is-required="is-required" param1="loadbalance.targetPort" class="ui-input-fill line-element"/>
            </div>
            <div ng-if="visitMode.currentData=='foreign'" class="line-full"><span class="log-title"> 对外访问IP</span>
              <div class="line-element">
                <div ng-repeat="ips in config.loadBalanceDrafts[$index].externalIPs" class="ips">
                  <input placeholder="请输入对外访问IP" name="externalIPs" ng-focus="$last&amp;&amp;deployIns.addExternalIPs($parent.$index)" ng-model="ips.ip" required="required" ng-required="externalIsnull.date" class="ui-input-fill full"/><a ng-show="loadbalance.externalIPs.length&gt;1" ng-click="deployIns.deleteExternalIPs($parent.$index,$index)" class="txt-wrap icon-delete"></a>
                </div>
              </div>
            </div>
          </div>
          <div ng-if="visitMode.currentData=='internal'" ng-repeat="innerService in config.innerServiceDrafts">
            <div class="line-full"><span class="log-title"> 程序服务端口</span>
              <input placeholder="请输入容器内部端口" name="targetPort" ng-model="innerService.port" required="required" class="ui-input-fill line-element"/>
            </div><span class="txt-prompt tool-align-input">集群内部访问端口和程序服务端口相同</span>
          </div>
        </div>
        <div ng-form="ng-form" name="openHostForm" ng-if="config.networkMode=='HOST'" class="log-item">
          <div class="line-full"><span class="serlog-title">对外暴露端口个数:</span>
            <input name="hostNum" ng-model="config.exposePortNum" required="required" ng-pattern="/^[1-9]\d*$/" class="ui-input-fill line-element"/>
          </div><span class="txt-prompt tool-align-input">Host网络下，系统会给每个实例分配若干个端口，用于对外服务和实例间通信。此外，在Host网络下，实例ip和宿主机ip一致。</span>
        </div>
      </div>
    </li>
  </ul>
  <div class="com-bottom-option"><span class="com-bottom-option-con">
      <button ng-click="toLastStep()" class="ui-btn ui-btn-md ui-btn-bright">上一步</button>
      <button ng-disabled="loadingsIns.isLoading" ng-click="needValid=true;deployForm.$valid&amp;&amp;toCreate()" class="ui-btn ui-btn-md ui-btn-bright">完成创建</button><span ng-if="needValid&amp;&amp;deployForm.$invalid" class="txt-error">存在不合法数据，请修改后提交！</span></span></div>
</div>